<!-- 扬尘检测/右侧顶部 -->
<template>
  <div class="RightTop">
    <checked-title title="街道案件占比">
      <template #right>
        <div class="title2 pointer" :class="active == item.value ? 'active' : ''" @click="tabChange(item.value)"
          v-for="(item, index) in tabList" :key="index">
          {{ item.title }}
        </div>
      </template>
    </checked-title>
    <div class="ljxq-echarts" id="ljxq-echarts" ref="ljxqecharts" style="height: 300px"></div>
  </div>
</template>

<script>
import Highcharts from 'highcharts'
import highcharts3d from 'highcharts/highcharts-3d'
highcharts3d(Highcharts)
import { getRunState } from '@/api/index'
import { LaoJiuXiaoQuDB } from '@/api'

export default {
  data() {
    return {
      active: '4',
      tabList: [
        { title: '本日', value: '1' },
        { title: '本周', value: '2' },
        { title: '本月', value: '3' },
        { title: '本年', value: '4' },
      ],

      data: [],
      num: [],
      dataList: [],
      total: 0,
    }
  },
  mounted() {
    this.rankingList()
  },
  beforeDestroy() {
    this.desHander()
  },
  methods: {
    // 更新
    tabChange(active) {
      this.active = active
      this.total = 0;
      this.rankingList('tabChange')
    },

    // 排名统计数据
    rankingList(type) {
      const data = {
        dateType: this.active,
      }
      LaoJiuXiaoQuDB.getPercentage(data).then((res) => {
        let colorList = [
          ['#061535', '#3DCEA3'],
          ['#061535', '#FF7474'],
          ['#061535', '#BE22FF'],
          ['#061535', '#00CCFF'],
          ['#061535', '#1E92FF'],
          ['#061535', '#326CF1'],
          ['#061535', '#5CFFFD'],
          ['#061535', '#FF791F'],
          ['#061535', '#FF1F1F'],
          ['#061535', '#FFCE57'],
        ]
        let dataList = []
        res.data.forEach((item, index) => {
          if (item.value <= 0) {
            return;
          }
          this.total += item.value;
          dataList.push(
            {
              value: item.value,
              show: true,
              name: item.name,
              itemStyle: {
                normal: {

                  color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [
                    {
                      offset: 0,
                      color: colorList[index][0],
                    },
                    {
                      offset: 1,
                      color: colorList[index][1],
                    },
                  ]),
                },
              },
            },
            {
              value: 10,
              show: false,
              name: '',
              itemStyle: {
                normal: {
                  color: 'transparent',
                },
              },
            }
          )
        })
        this.$nextTick(() => {
          if (type == 'tabChange') {
            this.desHander()
          }
          this.initChat(dataList)
        })
      })
    },

    initChat(dataList) {
      var myChart = echarts.init(this.$refs.ljxqecharts)
      function Pie() {
        let dataArr = []
        for (var i = 0; i < 150; i++) {
          if (i % 2 === 0) {
            dataArr.push({
              name: (i + 1).toString(),
              value: 5,
              itemStyle: {
                normal: {
                  color: '#027383',
                  borderWidth: 0,
                  borderColor: 'rgba(0,0,0,0)',
                },
              },
            })
          } else {
            dataArr.push({
              name: (i + 1).toString(),
              value: 5,
              itemStyle: {
                normal: {
                  color: 'rgba(0,0,0,0)',
                  borderWidth: 0,
                  borderColor: 'rgba(0,0,0,0)',
                },
              },
            })
          }
        }
        return dataArr
      }

      let option = {
        backgroundColor: 'rgba(15,24,44,0.1)',
        title: [
          {
            text: this.total + ' 件',
            x: '22%',
            y: '45%',
            textStyle: {
              fontWeight: 'normal',
              color: '#fff',
              fontSize: '25',
            },
          },
        ],
        legend: {
          selectedMode: true, // 取消图例上的点击事件
          icon: 'circle',
          type: 'plain',
          orient: 'vertical',
          left: '63%',
          top: 'center',
          align: 'left',
          itemGap: 20,
          itemWidth: 12, // 设置宽度
          itemHeight: 10, // 设置高度
          symbolKeepAspect: false,
          textStyle: {
            color: '#000',
            rich: {
              name: {
                verticalAlign: 'right',
                align: 'left',
                fontSize: 14,
                color: '#FFFFFF',
              },
              value: {
                align: 'left',
                fontSize: 14,
                color: '#B0E3FF',
              },
            },
          },
          data: dataList.map((item) => {
            if (item.show) {
              return item.name
            }
          }),
          formatter: function (name) {
            if (dataList && dataList.length) {
              for (var i = 0; i < dataList.length; i++) {
                if (name === dataList[i].name) {
                  return (
                    '{name| ' +
                    name +
                    '}' +
                    '{value| ' +
                    dataList[i].value +
                    '}'
                  )
                }
              }
            }
          },
        },
        series: [
          {
            name: '学历',
            type: 'pie',
            radius: ['75%', '65%'],
            center: ['30%', '50%'],
            hoverAnimation: false,
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center',
            },
            emphasis: {
              label: {
                show: true,
              },
            },
            labelLine: {
              show: false,
            },
            data: dataList,
          },
          {
            type: 'pie',
            center: ['30%', '50%'],
            radius: ['85', '80'],
            label: {
              show: false,
            },
            data: Pie(),
          },
        ],
      }
      myChart.setOption(option)
    },

    desHander() {
      let myChart = echarts.init(this.$refs.ljxqecharts)
      myChart.dispose()
    },
  },
}
</script>
<style lang="less" scoped></style>
